import SForm, { FormRefProps } from '@/pages/form-model/SForm';
import { FormScheme } from '@/pages/form-model/interface';
import {
  Button,
  InputNumber,
  InputNumberProps,
  InputProps,
  RadioGroupProps,
  SelectProps,
  SwitchProps,
} from 'antd';
import { useEffect, useRef, useState } from 'react';
import SFormTest from '@/pages/form-model/SFormTest';

export default function () {
  const sf = useRef<FormRefProps>(null);
  const [v, setV] = useState<string>('');
  const config: FormScheme = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
    properties: [
      {
        name: 'name',
        label: '姓名',
        props: {
          placeholder: '请输入你的姓名',
          maxLength: 5,
        } as InputProps,
      },
      {
        name: 'house',
        type: 'object',
        properties: [
          {
            name: 'address',
            label: '房屋地址',
            widget: 'select',
            props: {
              allowClear: true,
              placeholder: '请选择地址',
              options: [
                { value: 'china', label: '中国' },
                { value: 'other', label: '其他' },
              ],
            } as SelectProps,
          },
          {
            name: 'size',
            label: '房屋大小',
            widget: 'inputNumber',
            props: {
              placeholder: '请输入房子面积',
              min: 0,
              max: 1000,
            } as InputNumberProps,
          },
        ],
      },
    ],
    required: ['name'],
  };

  useEffect(() => {
    setTimeout(() => {
      const age = sf.current.formModel.getProperty('info/age');
      age.setVisible(false);
    }, 3000);
  });

  function ok() {
    sf.current.formModel.getFormValidateFields().then((res) => {
      console.log(res);
    });
  }

  console.log('dddddddddd');

  return (
    <div>
      <SForm config={config} ref={sf} />
      {/*<SFormTest config={config}/>*/}
      <Button onClick={ok}>提交</Button>
    </div>
  );
}
